// checkbox & switch variables
// -------------------------

@checkbox-color: @white;
@checkbox-border-color: lighten(@themeColor, 10%);
@checkbox-checked-border: @checkbox-border-color;
@checkbox-hover-border: @checkbox-checked-border;

/* Checkbox & Radio */
input[type=checkbox].tc , input[type=radio].tc {
	opacity:0;
	position:absolute;
	z-index:12;
	width:17px; height:17px;
	cursor:pointer;
	
	&:checked, &:focus {
		outline:none !important;
	}
	
	+ .labels {
		position: relative;
		z-index:11;
		display:inline-block;
		margin:0;
		line-height:20px;

		min-height:18px;
		min-width:18px;
		font-weight:normal;
		font-size: @baseFontSize;

		&::before {
			font-family:fontAwesome; font-weight:normal;
			font-size: 12px; color:@checkbox-color;
			content:"\a0";
			display:inline-block;
			background-color: #FAFAFA;
			border: 1px solid @checkbox-border-color;
			box-shadow: 0 1px 2px rgba(0,0,0,0.05);/*, inset 0px -15px 10px -12px rgba(0,0,0,0.05);*/
			border-radius: 0;
			display: inline-block;
			text-align:center;
			
			vertical-align:middle;

			height:16px; line-height:14px;
			min-width:16px;	
			
			margin-right:1px;
		}
	}//.labels
	
	&:checked + .labels::before ,
	{
		display:inline-block;
		content: '\f00c';
		background-color: @checkbox-border-color;
		border-color:@checkbox-checked-border;
		box-shadow: 0 1px 2px rgba(0,0,0,0.05), inset 0px -15px 10px -12px rgba(0,0,0,0.05), inset 15px 10px -12px rgba(255,255,255,0.1);
	}
	&:hover + .labels::before , + .labels:hover::before {
		border-color:@checkbox-hover-border;
	}

	
	&:active , &:checked:active {
		+ .labels::before {
			box-shadow: 0 1px 2px rgba(0,0,0,0.05), inset 0px 1px 3px rgba(0,0,0,0.1);
		}
	}
	
	&.tc-gray + .labels::before {
		box-shadow: none;
		border-color: @gray;
	}
	&.tc-gary:checked + .labels::before {
		background-color: @gray;
		border-color: @gray;
		color: @white;
	}	
	
	&.tc-danger + .labels::before {
		box-shadow: none;
		border-color: @brand-danger;
	}
	&.tc-danger:checked + .labels::before {
		background-color: @brand-danger;
		border-color: @brand-danger;
		color: @white;
	}

	&.tc-success + .labels::before {
		box-shadow: none;
		border-color: @brand-success;
	}
	&.tc-success:checked + .labels::before {
		background-color: @brand-success;
		border-color: @brand-success;
		color: @white;
	}
	
	&.tc-info + .labels::before {
		box-shadow: none;
		border-color: @brand-info;
	}
	&.tc-info:checked + .labels::before {
		background-color: @brand-info;
		border-color: @brand-info;
		color: @white;
	}
	
	&.tc-primary + .labels::before {
		box-shadow: none;
		border-color: @brand-primary;
	}
	&.tc-primary:checked + .labels::before {
		background-color: @brand-primary;
		border-color: @brand-primary;
		color: @white;
	}
	
	&.tc-warning + .labels::before {
		box-shadow: none;
		border-color: @brand-warning;
	}
	&.tc-warning:checked + .labels::before {
		background-color: @brand-warning;
		border-color: @brand-warning;
		color: @white;
	}

	&:disabled + .labels::before ,
	&[disabled] + .labels::before ,
	&.disabled + .labels::before {
		background-color:@gray-lighter !important;
		border-color:@default-border-color !important;
		box-shadow:none !important;
		color:#BBB;
	}
}

input[type=radio].tc + .labels::before {
	border-radius: 100%;
	font-size: 11px;
	font-family: FontAwesome;//let's use a fonts that's available everywhere
	text-shadow: 0 0 1px @checkbox-color;

	line-height: 15px;	
	height: 17px;
	min-width: 17px;
}
input[type=radio].tc:checked + .labels::before {
	content:"\f111";
	font-size: @baseFontSize;
}







/* CSS3 on/off switches */
//use like <input type="checkbox" class="tc tc-switch" /> <span class="lables"></span>
input[type=checkbox].tc.tc-switch {
  width:55px;
  height:25px;

	+ .labels {
		margin:0 4px;
		min-height:24px;
		
		&::before {
			font-family:Arial, Helvetica, sans-serif;
			content:@switch-1-text;
			color:@gray;
			font-weight:bold;
			font-size:11px;
			line-height:18px;
			line-height:21px\9;/*ie9*/
			height:20px;
			overflow:hidden;
			border-radius:12px;
			background-color: @gray-lighter;
			.box-shadow(~"inset 0px 2px 2px 0px rgba(0,0,0,.2)");

			border: 1px solid #CCC;

			text-align:left;
			float:left;
			padding:0;
			width:52px;
			text-indent:-19px; text-indent:~"-21px\9";
			margin-right:0;
			.transition(~"text-indent .4s ease");
		}
		
		&::after {
			font-family:Arial, Helvetica, sans-serif;
			content: '|||'; 
			font-size: 10px;
			font-weight:lighter;
			color:@gray;
			background-color:@white;			
			text-shadow:-1px 0px 0 rgba(0, 0, 0, 0.15);
			text-align:center;
			border-radius:100%;			
			width:22px; height:22px; line-height:20px;
			position: absolute;
			top: -2px; left: -3px;
			padding:0;
			.box-shadow(~"0px 1px 1px 1px rgba(0,0,0,.3)");
			text-shadow:0px 1px 1px rgba(0,0,0,0.3) inset;
			.transition(~"left .4s ease");
		}
	}
	
	&:checked + .labels {
		&::before {
			text-indent:9px;

			color:@white;
			background-color:@switch-checked-bg;
			border-color:@switch-checked-border;
		}
		&::after {
			left:34px;
			background-color:@white;
			color:@switch-checked-bg;
		}
	}
	
	
	&.tc-switch-2 + .labels::before {
		content:@switch-2-text;
	}

	&.tc-switch-3 + .labels::after {
		font-family:FontAwesome;
		font-size:13px; line-height:23px;
		content:"\f00d";
		top:-1px;
	}
	&.tc-switch-3:checked + .labels::after {
		content:"\f00c";
	}
	
	/* switch style 4 & 5 */
	&.tc-switch-4 , &.tc-switch-5 {
		+ .labels::before {
			content:@switch-4-text;
			font-family:Arial, Helvetica, sans-serif;
			font-weight:bolder;
			font-size:12px;
			line-height:23px;
			height:24px; overflow:hidden;
			line-height:25px\9;			
			border-radius:12px;			
			display:inline-block;
			background-color: @switch4-bg;
			border: 1px solid @switch4-bg;
			color:@white;
			width:56px;
			text-indent:-25px;
			text-indent:~"-28px\9";			
			display: inline-block;
			position: relative;					
			box-shadow:none;	
			.transition(~"all .4s ease");
		}
		
		+ .labels::after {
			font-family:Helvetica, Arial, sans-serif;
			content: '|||'; text-shadow:-1px 0px 0 rgba(0, 0, 0, 0.2);
			font-size: 8px; font-weight:lighter;
			color:@switch4-bg;
			text-align:center;
			position: absolute;
			border-radius:12px;	
			color:@switch4-color;
			top: 2px; left: 2px;
			width:20px; height:20px; line-height:18px;
			background-color:@white;
			.transition(~"all .4s ease");
		}

		
		&:checked + .labels {
			&::before {
				text-indent:9px;
				background-color:@switch4-checked-bg;
				border-color:@switch4-border-color;
			}
			&::after {
				left:34px;
				background-color:@white;
			}
		}
		
		
	}
	&.tc-switch-5 + .labels::before {
		content:@switch-5-text;
	}
	&.tc-switch-5:checked + .labels::before {
		text-indent:8px;
	}
	
	
	/* switch style 6 */
	&.tc-switch-6 {
		+ .labels {
			position: relative;
			&::before {
				font-family:FontAwesome;
				content:"\f00d";
				text-shadow:0 -1px 0 rgba(0, 0, 0, 0.25);
				box-shadow:none;
				border:none;

				font-weight:lighter;
				font-size:16px;
				border-radius:12px;
				display:inline-block;
				background-color: @gray;
				color:@white;
				width:52px; height:22px; line-height:20px;
				text-indent:32px;
				.transition(~"background 0.1s ease");
			}
			&::after {
				content: ''; text-shadow:0 -1px 0 rgba(0, 0, 0, 0.25);
				position: absolute;
				top: 2px; left: 3px;				
				border-radius:12px;
				box-shadow:0 -1px 0 rgba(0, 0, 0, 0.25);
				width:18px; height:18px;
				text-align:center;				
				background-color:#F2F2F2;
				border:4px solid #F2F2F2;				
				.transition(~"left 0.2s ease");
			}
		}
		
		&:checked + .labels {
			&::before {
				content: "\f00c";
				text-indent:6px;
				color:@white;
				border-color:@switch6-checked-border;
				background-color:@switch6-checked-bg;
			}
			&::after {
				left:32px;
				background-color:@white;
				border:4px solid @white;
				text-shadow:0 -1px 0 rgba(0, 200, 0, 0.25);
			}
		}
	}
	
	
	&.tc-switch-7 {
		width:75px;

		+ .labels {
			position: relative;
			&::before {
				content:@switch-7-text;
				font-weight:bolder;
				font-size:14px;
				line-height:20px;
				display:inline-block;
				background-color: @white;
				border: 1px solid @gray-light;
				border-radius:0;
				box-shadow:none;
				color:@gray-light;
				width:74px;
				height:26px;
				line-height:22px;
				overflow:hidden;
				text-indent:4px;				
				display: inline-block;
				position: relative;
				.transition(~"all 0.2s ease");
			}
			
			&::after {
				content: '\f00d';
				font-family:FontAwesome;
				font-size: 16px;
				position: absolute;
				top: 3px;
				left: 39px;
				width:32px;
				height:20px;
				line-height:18px;				
				text-align:center;				
				background-color:@gray-light;
				color:@white;
				border-radius:0;
				box-shadow:none;				
				.transition(~"all 0.2s ease-in-out");
			}
		}
		
		&:checked + .labels {
			&::before {
				color:@switch7-checked-bg;
				background-color: @white;
				text-indent:-33px;
				border-color:@switch7-checked-border;
			}
			&::after {
				left:3px;
				content:'\f00c';
				background-color:@switch7-checked-bg;
				color: @white;
			}
		}

	}
}